/*轨迹回放工具有*/
//import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
//import {Cluster, OSM, Vector as VectorSource} from 'ol/source.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import {Vector as VectorSource} from 'ol/source.js';
import GeoJSON from "ol/format/GeoJSON"; //用｛｝会出现 GeoJSON is not a constructor
import {JSONFeature} from "ol/format/JSONFeature";
import ol_style_Style from "ol/style/Style";
import ol_style_Stroke from "ol/style/Stroke";
import ol_style_Icon from "ol/style/Icon";
import Point from "ol/geom/Point.js";


class rackTools2 {
  constructor(map) {
    this.map = null;
    this.vectorLayer=null;
    this.gjson=null;
    this.coordinates=[];
    this.feature=null;
    this.source = null; //对应me.all_obj.monitor.data_c

    this.drawTool = null;
    this.event = null;
  }

  /**
   * 轨迹回放
   */
  track(map,data){
    this.map=map;
    this.setData();
    map.addLayer(this.vectorLayer);

  }

  /**
   * 设置map, 初始layer 和 source
   * @param map
   */
  setMap(map){
/*    this.map=map;

    //加载矢量图层，绘制线
    this.vectorLayer = new VectorLayer({
      source: new VectorSource(),
    });
    map.addLayer(vectorLayer);*/
  }

  /**
   * 加载测试数据到矢量图层上
   */
  setData(){
    this.gjson = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "LineString",
            coordinates: [
              [114.2924451828003, 30.548735055676342],
              [114.29841041564941, 30.543006308026428],
              [114.29866790771484, 30.53731418530321],
              [114.29763793945311, 30.530623666534726],
              [114.29145812988281, 30.526927049704433],
              [114.28613662719725, 30.528479645904042],
              [114.27154541015625, 30.50666709259759],
              [114.28184509277342, 30.49305949630156],
              [114.30931091308594, 30.500750980290693],
              [114.32304382324219, 30.51494904517773],
              [114.32785034179688, 30.525004753369974],
              [114.31686401367188, 30.534467998833467],
              [114.30107116699219, 30.517906714408557],
              [114.29557800292969, 30.513174400443376],
              [114.30107116699219, 30.491876137098675],
              [114.29969787597656, 30.484183951487754],
              [114.29008483886717, 30.4711650216242],
              [114.2749786376953, 30.47471581151385],
              [114.2633056640625, 30.484183951487754],
              [114.2523193359375, 30.49483450812004],
              [114.24819946289062, 30.517906714408557],
              [114.25506591796875, 30.538607878854556],
              [114.27566528320312, 30.54688710949595],
              [114.31137084960938, 30.554574334398687],
              [114.33334350585938, 30.547478456100688],
              [114.34364318847656, 30.53328514356082],
              [114.3402099609375, 30.50903343674927],
            ],
          },
        },
      ],
    };
    this.map.getView().setCenter([114.2924451828003, 30.548735055676342]);
    this.feature = new GeoJSON().readFeatures(this.gjson);
    console.log(this.feature);
    this.source = new VectorSource({
      features:this.feature
    });
    this.vectorLayer = new VectorLayer({
      source: this.source,
      style: this.arrowLineStyles(this.feature[0],this.map.getView().getResolution()),
    });



/*    const vectorSource = new VectorSource({
      features: new GeoJSON().readFeatures(geojsonObject),
    });
    const vectorLayer = new VectorLayer({
      source: vectorSource,
      style: styleFunction,
    });*/
    //vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));

    /**
     * 官网的例子
     * https://openlayers.vip/examples/geojson.html
     */

/*    const vectorSource = new VectorSource({
      features: new GeoJSON().readFeatures(geojsonObject),
    });

    vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));*/


    /**
     * 以上网上搜到的写法
     * https://blog.csdn.net/github_31946551/article/details/130380044
     */

  /*  let feat = JSONFeature.readFeature(
      this.gjson.features[0],
      {
        featureProjection: this.map.getView().getProjection(),
    });

    this.vectorLayer.getSource().addFeature(feat);*/
  }

  /**
   * 箭头样式计算
   * @param feature
   * @param resolution 分辨率
   * @returns {*[]}
   */

  arrowLineStyles(feature, resolution) {
    let styles = [];
    // 线条样式
    let backgroundLineStyle = new ol_style_Style({
      stroke: new ol_style_Stroke({
        color: "green",
        width: 10,
      }),
    });
    styles.push(backgroundLineStyle);
    let geometry = feature.getGeometry();
    // 获取线段长度
    const length = geometry.getLength();
    // 箭头间隔距离（像素）
    const step = 50;
    // 将间隔像素距离转换成地图的真实距离
    const StepLength = step * resolution;
    // 得到一共需要绘制多少个 箭头
    const arrowNum = Math.floor(length / StepLength);
    const rotations = [];
    const distances = [0];
    geometry.forEachSegment(function (start, end) {
      let dx = end[0] - start[0];
      let dy = end[1] - start[1];
      let rotation = Math.atan2(dy, dx);
      distances.unshift(Math.sqrt(dx ** 2 + dy ** 2) + distances[0]);
      rotations.push(rotation);
    });
    // 利用之前计算得到的线段矢量信息，生成对应的点样式塞入默认样式中
    // 从而绘制内部箭头
    console.log("arrowNum: %o", arrowNum);
    for (let i = 1; i < arrowNum; ++i) {
      const arrowCoord = geometry.getCoordinateAt(i / arrowNum);
      const d = i * StepLength;
      const grid = distances.findIndex((x) => x <= d);

      styles.push(
        new ol_style_Style({
          geometry: new Point(arrowCoord),
          image: new ol_style_Icon({
            //src: routearrow,
            src: "images/routearrow.png",
            opacity: 0.8,
            anchor: [0.5, 0.5],
            rotateWithView: false,
            // 读取 rotations 中计算存放的方向信息
            rotation: -rotations[distances.length - grid - 1],
            scale: 0.8,
          }),
        })
      );
    }
    return styles;
  }


}

export default rackTools2;
